import React, { useMemo, useState } from "react";
import Taro from "@tarojs/taro";
import { View, Swiper, SwiperItem, Text, Image } from "@tarojs/components";
import { HideLoading, ShowLoading, ShowToast } from "@/utils";
import TypeSwitch from "@/components/typeSwitch";
import { uploadFile } from "@/request/upload";
import account from "@/store/account";
import { billType } from "@/types";
import categorys from "@/store/categorys";

const aliImgs = [
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/ali1.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/ali2.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/ali3.png'
]
const wxImgs = [
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx1.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx2.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx3.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx4.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx5.png',
    'https://study-plans-file.oss-cn-chengdu.aliyuncs.com/project/import-guide/wx6.png'
]
const ImportGuide: React.FC<{ onFinish: (bills: billType[]) => void }> = ({ onFinish }) => {
    const [showType, setShowType] = useState<string>('aliPay')

    const [currentIndex, setCurrentIndex] = useState<number>(0)

    const displayList = useMemo(() => {
        return showType === 'wx' ? wxImgs : aliImgs
    }, [showType])

    const typeChange = (val) => {
        setShowType(val)
        setCurrentIndex(0)
    }

    const importCSV = () => {
        Taro.chooseMessageFile({
            type: 'file',
            count: 1,
            extension: ['csv'],
            success: (res) => {
                ShowLoading()
                uploadFile('/export-import/import', res.tempFiles[0].path, {
                    accountId: account.activeAccount?.id
                }).then(res => {
                    const accountMap = account.accountList.reduce((obj, item) => {
                        return {
                            ...obj,
                            [item.id || '']: item.name
                        }
                    }, {})
                    onFinish(res.data.map((item, index) => {
                        return {
                            ...item,
                            id: index,
                            categoryName: categorys.categoryMap[item.category].name,
                            accountName: accountMap[item.accountId]
                        }
                    }));
                    HideLoading()
                }).catch(err => {
                    ShowToast(err.msg || '文件导入失败')
                })
            },
            fail(_) {
                // ShowToast(err.errMsg || '导入失败,请检查文件格式')
            },
        })
    }

    const previewImg = (index, urls) => {
        Taro.previewImage({
            urls,
            current: index
        });
    }
    return (
        <View className="guide-component-container">
            <View className="section font-size28 card-background">
                <View className="title">一、注意事项</View>
                <View className="content">
                    <View className="sub-section">1、只能导入csv格式的文件</View>
                    <View className="sub-section">2、支付宝或者微信导出的账单，可以不做任何处理直接导入，如果是其他系统导出的账单，需要用户先自行处理（列名改为和支付宝账单一致，文件编码格式GBK）</View>
                    <View className="sub-section">3、导入前请务必仔细检查账单，避免导入账单与系统中手动记录的账单重复，导致统计数据不准确</View>
                </View>
            </View>
            <View className="section font-size28 card-background">
                <View className="title flex-row">二、从第三方导出账单（以支付宝和微信为例）</View>
                <TypeSwitch
                    onChange={(type) => typeChange(type)}
                    list={[
                        { name: '支付宝', value: 'aliPay' },
                        { name: '微信', value: 'wx' }
                    ]}>
                </TypeSwitch>
                <Swiper
                    className='swiper-item'
                    indicatorColor='#999'
                    indicatorActiveColor='#333'
                    indicatorDots
                    current={currentIndex}
                    onChange={e => setCurrentIndex(e.detail.current)}
                    adjustHeight="highest">
                    {
                        displayList.map((url, index) => {
                            return <SwiperItem>
                                <Image className="guide-img"
                                    mode="aspectFit"
                                    src={url}
                                    key={index}
                                    onClick={() => previewImg(index, displayList)}>
                                </Image>
                            </SwiperItem>
                        })
                    }
                </Swiper>
            </View>
            <View className="section font-size28 card-background">
                <View className="title">三、发送账单到聊天窗口</View>
                <View className="content">
                    <View className="sub-section">1、将导出的csv文件发送到微信的【文件传输助手】（其他任意好友也可以）</View>
                </View>
            </View>

            <View className="section font-size28 card-background">
                <View className="title">四、选择文件，开始导入</View>
                <View className="content">
                    <View className="sub-section">1、点击下方【开始导入】就可以选择刚刚发送的那个聊天记录了，等待导入完成即可</View>
                </View>
                <View onClick={importCSV} className="invite-btn border-main-color flex-row flex-center">
                    <Text className="iconfont icon-shangchuan"></Text>
                    <Text>开始导入</Text>
                </View>
            </View>
        </View>
    )
}

export default ImportGuide